<template>
  <div class="form-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="jiben">
        <jiben :metting-id="id" />
      </el-tab-pane>
      <!-- <el-tab-pane label="欢迎辞" name="huanyingci">欢迎辞</el-tab-pane> -->
      <!-- <el-tab-pane label="组织架构" name="jiagou">组织架构</el-tab-pane> -->
      <el-tab-pane label="轮播图" name="banner">
        <banner :metting-id="id" />
      </el-tab-pane>
      <el-tab-pane label="会议动态" name="dongtai">
        <dongtai :metting-id="id" />
      </el-tab-pane>
      <el-tab-pane label="会议日程" name="richeng">
        <richeng :metting-id="id" />
      </el-tab-pane>
      <el-tab-pane label="参会嘉宾" name="jiabin">
        <jiabin :metting-id="id" />
      </el-tab-pane>
      <el-tab-pane label="赞助单位" name="zanzhu">
        <zanzhu :metting-id="id" />
      </el-tab-pane>
      <el-tab-pane label="组织单位" name="zuzhi">
        <zuzhi :metting-id="id" />
      </el-tab-pane>
      <el-tab-pane label="账户信息" name="zhanghu">
        <account :metting-id="id" />
      </el-tab-pane>
      <el-tab-pane label="会务费用" name="feiyong">
        <fee :metting-id="id" />
      </el-tab-pane>
      <el-tab-pane label="联系我们" name="contact">
        <contact :metting-id="id" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
  import jiben from './components/Jiben.vue'
  import jiabin from './components/Jiabin.vue'
  import zanzhu from './components/Zanzhu.vue'
  import zuzhi from './components/Zuzhi.vue'
  import dongtai from './components/Dongtai.vue'
  import richeng from './components/Richeng.vue'
  import banner from './components/Banner.vue'
  import contact from './components/Contact.vue'
  import account from './components/Account.vue'
  import fee from './components/Fee.vue'
  export default defineComponent({
    components: {
      jiben,
      banner,
      jiabin,
      zanzhu,
      zuzhi,
      dongtai,
      richeng,
      contact,
      account,
      fee,
    },

    props: {
      infoData: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    setup() {
      const { proxy } = getCurrentInstance()
      const state = reactive({
        id: proxy.$route.query.id,
        activeName: 'banner',
      })

      const handleClick = (tab, event) => {
        console.log(tab, event)
      }
      return {
        ...toRefs(state),
        handleClick,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .pay-button-group {
    display: block;
    margin: 20px auto;
    text-align: center;
  }
</style>
